body{
  background: rgb(15, 15, 60);
}
#app{
  margin: 16px auto;
}
.wrapper{
  text-align: center;
}
.ctn{
  border: rgb(15, 15, 60) solid 1px;
  background: #4AA399;
  display: inline-block;
}
table{
  background: rgb(15, 15, 60);
}
table th{
  background: #aaa;
}
.head-color{
  width: 100%;
  cursor: pointer;
}
.head-color:active{
  opacity: 0.5;
}
.head-color.red{
  background: #DC143C;
}
.head-color.green{
  background: #90EE90;
}
.head-color.blue{
  background: #1f0cb1;
}
.head-color.yellow{
  background: #FFD700;
}
table td{
  background: #4AA399;
  position: relative;
}
table td .cell{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
table td .row-head{
  cursor: pointer;
  user-select: none;
}
table td .row-head:active{
  font-size: 1.3em;
}
.sel-row, .sel-col{
  /* background: rgba(255, 255, 255, 0.3) */
  background: rgb(224, 186, 152);
}
.sel-row.sel-col{
  /* background: rgba(255, 255, 255, 0.7) */
  background: rgb(222, 151, 88);
}
.cell-handle{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cell-handle:active{
  background: #eeab00aa;
}
.cell-handle.jizhong:after{
  content: 'z'
}
